<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>css3过渡</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<style>
.demo{width:360px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
	.demo{width:800px; margin:60px auto 10px auto}
}
.box{float:left; width:380px; height:260px}
.clear{clear:both}
</style>

</head>

<body>
<p>xudada添加了一个段落</p>
<div class="demo">

	<div class="box">
		<div class="he_border1">
			<img class="he_border1_img" src="images/pro_1.jpg" alt="Image 01">
			<div class="he_border1_caption">
				<h3 class="he_border1_caption_h">过渡</h3>
				<p class="he_border1_caption_p">过渡效果+演示+源码</p>
				<a class="he_border1_caption_a" href="#"></a>
			</div>
		</div>
	</div>
	
	<div class="box">
		<div class="he_border2">
			<img class="he_border2_img" src="images/pro_2.jpg" alt="Image 01">
			<div class="he_border2_caption">
				<h3 class="he_border2_caption_h">过渡</h3>
				<p class="he_border2_caption_p">过渡效果+演示+源码</p>
				<a class="he_border2_caption_a" href="#"></a>
			</div>
		</div>
	</div>
	
	<div class="box">
		<div class="he_3DFlipX">
			<div class="he_3DFlipX_inner">
				<div class="he_3DFlipX_img">
					<img src="images/pro_3.jpg" alt="img01">
				</div>
				<div class="he_3DFlipX_caption">
					<h3>过渡</h3>
					<p>过渡效果+演示+源码</p>
				</div>
				<a href="#"></a>
			 </div>
		</div>
	</div>
	
	<div class="box">
		<div class="he_3DFlipY">
			<div class="he_3DFlipY_inner">
				<div class="he_3DFlipY_img">
					<img src="images/pro_1.jpg" alt="img01">
				</div>
				<div class="he_3DFlipY_caption">
					<h3>过渡</h3>
					<p>过渡效果+演示+源码</p>
				</div>
				<a href="#"></a>
			 </div>
		</div>
	</div>
	
	<div class="clear"></div>
	
</div>


</body>
</html>